<script setup>
import { inject, onMounted, ref, onBeforeUnmount, watch } from 'vue'
import mitter from '@/utils/eventBus'

const props = defineProps({
  floorObj: Object,
})

let floors = ref(['整栋'])

let activeFloor = ref(0)

const floorClick = (index) => {
  activeFloor.value = index
  if (index == 0) {
    mitter.emit('showFloor', { show: false, floor: index })
  } else {
    mitter.emit('showFloor', { show: true, floor: index })
  }
}

onMounted(() => {
  if (props.floorObj?.floorCount) {
    for (var i = 1; i <= props.floorObj.floorCount; i++) {
      floors.value.push(i + 'F')
    }
  }
  activeFloor.value = 0
  console.log(floors.value)
})
</script>
<template>
  <div class="floor-tools">
    <div class="floor-tools-top">
      <img src="../../../assets/imgs/bt_lc_nor.png" />
    </div>
    <div class="floor-tools-bottom">
      <div
        class="floor-tools-bottom-item"
        :class="activeFloor == index ? 'active' : ''"
        v-for="(item, index) in floors"
        :key="index"
        @click="floorClick(index)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.floor-tools {
  position: absolute;
  bottom: 122px;
  left: -52px;
  display: flex;
  flex-direction: column;
  width: 48px;

  &-top {
    height: 48px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url('@/assets/imgs/floor_top.png');
    position: relative;
    top: 2px;

    img {
      height: 100%;
      width: 100%;
    }
  }

  &-bottom {
    padding-left: 1px;
    padding-right: 1px;
    background-size: 100% 100%;
    height: 500px;
    background-repeat: no-repeat;
    background-image: url('@/assets/imgs/floor_f.png');
    padding-top: 10px;

    &-item {
      height: 40px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      font-size: 14px;
      color: #c4eaff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      &:hover {
        color: #ffffff;
        background-image: url('@/assets/imgs/floor_tab_sel.png');
      }
    }

    .active {
      color: #ffffff;
      background-image: url('@/assets/imgs/floor_tab_sel.png');
    }
  }
}
</style>
